<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/layer.css" />
	<link rel="icon" href="images/favicon.png">
</head>
<style type="text/css">
	html,body{
		background:#fff;
	}
</style>
<body id="test_pasd">
	<div class="btn_back iconfont icon-fanhui">
		<a class="back_a">
			<img src="images/back.png"/>
		</a>
	</div>
	<div class="pasd_bg" id="test_bg">
		<div class="pasd_tit">忘记密码?</div>
		<dl class="inpt_dl">
			<dt class="inpt_dt">
				<img src="images/phon.png"/>
			</dt>
			<dd class="inpt_dd">
				<input type="text" placeholder="请输入您的手机号" class="inpt_all phone" id="pass-phone"/>
				<span class="span_img" id="x_div">
					<img src="images/x.png" style="width:67%;margin:6px 0 0 5px;"/>
				</span>
			</dd>
		</dl>
		<dl class="inpt_dl">
			<dt class="inpt_dt">
				<img src="images/yzm.png"/>
			</dt>
			<dd class="inpt_dd">
				<input type="text" placeholder="请输入验证码" class="inpt_all phone_yzm" id="yzm"/>
				<input type="button" id="yzbtn" class="YZbtn yzm" name="yzm" value="获取验证码" disabled="disabled">
			</dd>
		</dl>
		<dl class="inpt_dl">
			<dt class="inpt_dt">
				<img src="images/pasd.png"/>
			</dt>
			<dd class="inpt_dd">
				<input type="password" placeholder="请输入您的新密码" class="inpt_all" id="new_pasd"/>
				<span class="span_img invisible " id="pasd_span"><img src="images/by.png"/></span>
			</dd>
		</dl>
		<dl class="inpt_dl">
			<dt class="inpt_dt">
				<img src="images/pasd.png"/>
			</dt>
			<dd class="inpt_dd">
				<input type="password" placeholder="请确认新密码" class="inpt_all enter_pasd" id="enter_pasd"/>
				<span class="span_img invisible" id="enter_span"><img src="images/by.png"/></span>
			</dd>
		</dl>
		<button class="btn_pasd">保存</button>
	</div>
</body>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/layer.js" ></script>
<script type="text/javascript">
	autodivheight();
	function autodivheight() { //函数：获取尺寸  
		//获取浏览器窗口高度  
		var winHeight = 0;
		if(window.innerHeight) {
			winHeight = window.innerHeight;
		} else if((document.body) && (document.body.clientHeight)) {
			winHeight = document.body.clientHeight;
			//通过深入Document内部对body进行检测，获取浏览器窗口高度  
		}
		if(document.documentElement && document.documentElement.clientHeight) {
			winHeight = document.documentElement.clientHeight;
			//DIV高度为浏览器窗口的高度  
			document.getElementById("test_pasd").style.height = winHeight + "px";
		}
	}
	window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度  
	//背景高度固定
	height_bg();
	function height_bg() { //函数：获取尺寸  
		//获取浏览器窗口高度  
		var winHeight = 0;
		if(window.innerHeight) {
			winHeight = window.innerHeight;
		} else if((document.body) && (document.body.clientHeight)) {
			winHeight = document.body.clientHeight;
			//通过深入Document内部对body进行检测，获取浏览器窗口高度  
		}
		if(document.documentElement && document.documentElement.clientHeight) {
			winHeight = document.documentElement.clientHeight;
			//DIV高度为浏览器窗口的高度  
			document.getElementById("test_bg").style.height = winHeight - 75 + "px";
		}
	}
	window.onresize = height_bg; //浏览器窗口发生变化时同时变化DIV高度  
	//返回上一级
	$(".btn_back").click(function(){
		window.history.go(-1)
	})
	//消除手机号
	$("#pass-phone").on({
	    focus:function() {
	      $("#x_div").show();
	    },
	    blur:function() {
	      setTimeout(function(){
	        $("#x_div").hide();
	      },0)
	    }
	})
	$("#x_div").click(function(){ 
		$("#pass-phone").val("")
	})
	//点击按钮查看密码
	var passwordeye = $('#pasd_span');
   	var showPwd = $("#new_pasd");
   	passwordeye.off('click').on('click',function(){
   		if($("#new_pasd").val() == ""){
   			layer.msg('请输入新密码', {
			  time:2000
			});
   		}else if(passwordeye.hasClass('invisible')){
           passwordeye.removeClass('invisible').addClass('visible');//密码可见
           showPwd.prop('type','text');
           $(".visible img").attr("src","images/zy.png")
       }else{
           passwordeye.removeClass('visible').addClass('invisible');//密码不可见
           showPwd.prop('type','password');
           $(".invisible img").attr("src","images/by.png")
       };
   	});     
   	//确认密码按钮
   	var Enter_pasd = $('#enter_span');
   	var showPwd1 = $("#enter_pasd");
   	Enter_pasd.off('click').on('click',function(){
   		if($("#enter_pasd").val() == ""){
   			layer.msg('请输入确认密码', {
			  time:2000
			});
   		}else if(Enter_pasd.hasClass('invisible')){
           Enter_pasd.removeClass('invisible').addClass('visible');//密码可见
           showPwd1.prop('type','text');
           $(".visible img").attr("src","images/zy.png")
       }else{
           Enter_pasd.removeClass('visible').addClass('invisible');//密码不可见
           showPwd1.prop('type','password');
           $(".invisible img").attr("src","images/by.png")
       };
   	});     
	//验证码
	$(document).ready(function() {
		var ordertime = 60;
		var timeleft = ordertime;
		var btn = $(".yzm");
		var phone = $("#pass-phone");
		var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
		phone.keyup(function() {
			if(reg.test(phone.val())) {
				btn.removeAttr("disabled");
				$("#yzbtn").css("opacity","1");
			} else {
				btn.attr("disabled", true);
			}
		})
		function timeCount() {
			timeleft -= 1;
			if(timeleft > 0) {
				btn.val(timeleft + " 秒后重发");
				setTimeout(timeCount, 1000)
			} else {
				btn.val("重新发送");
				timeleft = ordertime;
				btn.removeAttr("disabled");
			}
		}
		btn.on("click", function() {
			$(this).attr("disabled", true);
            sendSms(phone.val());
			timeCount(this);
		})
	});
    /**
     * 发送短信验证码
     * @param tel 手机号码
     */
    function sendSms(tel) {
        $.ajax({
            type: "POST",
            url: "/mobile_phone/send_code",
            contentType: "application/json;charset=UTF-8",
            data:JSON.stringify({"mobile_number":tel,"code_type":"modify_password","force_user_nonexist":true}),
            dataType: "json",
            success: function (data) {
                if (data.code && data.code==='success') {
                    layer.msg("发送成功",{icon:1,time:1000});
                    $(this).attr("disabled", true);
                    timeCount(this);
                } else {
                    layer.msg(data.message,{icon:2,time:1000});
                }
            },
            error: function (data) {
                if(data.code==undefined){
                    layer.msg("登录失效",{icon:2,time:1000});
                    window.location.href ="/";
                }
                layer.msg(data.message);
            }
        });
    }
	$(".btn_pasd").click(function(){
        var referral_code = /*[[${referralCode}]]*/ "";
        var registerInfo={
            "mobile_number":"",//手机号
            "password":"",//密码
            "sms_code":""//手机验证码
        };
		//手机号验证
		var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
		if($('#pass-phone').val() == ""){
			layer.msg('请输入账号（手机号）', {
			  time:2000
			});
		}else if(!myreg.test($('#pass-phone').val())){
			layer.msg('请输入正确的手机号', {
			  time:2000
			});
		}else if($("#new_pasd").val() != $("#enter_pasd").val()){
            layer.msg('输入的密码不一致', {
                time:2000
            });
		}else{
            registerInfo.mobile_number = $('#pass-phone').val();
            registerInfo.password = $('#new_pasd').val();
            registerInfo.sms_code = $('#yzm').val();
            $.ajax({
                type: "POST",
                url: "/passwords/login_password/reset_password_via_mobile",
                contentType: "application/json;charset=UTF-8",
                data:JSON.stringify(registerInfo),
                dataType: "json",
                success: function (data) {
                    if (data.code && data.code==='success') {
                        layer.msg(data.message);
                        setTimeout(function() { window.location.href = "/"; }, 2000 );
                    } else {
                        layer.msg(data.message+"，请重试",{icon:2,time:1000});
                    }
                },
                error: function (data) {
                    layer.msg(data.message,{icon:2,time:1000});
                }
            });
		}
	})
</script>
</html>